<template>
  <!-- 分页基础组件 -->
  <div class="pageBox">
    <el-pagination background
                   layout="prev, pager, next,jumper,sizes,total"
                   v-model:total="total"
                   v-model:current-page="currentPage"
                   v-model:page-size="pageSize"
                   v-model:page-sizes="pageSizes"
                   v-model:pager-count="pagerCount"
                   @current-change="handlePageChange"
                   @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "Pages",
  emits: {
    action: {
      type: Function,
      // newPage 新页面，size 页面大小  每次切换页面触发事件，需要在事件中完成页面数据的更新
      default: function (newPage, size) {
        console.log('pagingAction:', newPage, size)
      }
    },
    change: {
      type: Function,
      default: function (page, size) {

      }
    }
  },
  data() {
    return {
      total: 0,
      // 默认页面号
      currentPage: 1,
      // 页面大小
      pageSize: 10,
      pageSizes: [5, 10, 15, 20],
      // 页码显示数量
      pagerCount: 11,
      size: 10,
      page: 1,
    }
  },
  methods: {
    handleSizeChange(number) {
      this.size = number
      this.$emit('change', this.page, this.size)
    },
    handlePageChange(number) {
      this.page = number
      this.$emit('action', this.page, this.size)
    },
    // 设置总条数
    SetTotal(total) {
      this.total = total
    },
    SetPage(page) {
      this.page = page
      this.currentPage = page
    },
    GetTotal() {
       return this.total
    },
    // 返回页面大小
    GetSize() {
      return this.size
    },
    // 返回当前页号
    GetPageNum() {
      return this.page
    },
    Index(v) {
      v = v + 1
      if (this.page > 1) {
        let n = (this.page - 1) * this.size
        return n + v
      }
      return v
    }
  }
}
</script>

<style scoped>
.pageBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  padding-bottom: 5px;
}
</style>